<!--********************************************************************
* Copyright© 2000 - 2020 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title data-i18n="resources.title_componentsEcharts_Vue"></title>
		<script type="text/javascript" include="vue,jquery" src="../js/include-web.js"></script>
		<script include="ant-design-vue,iclient-mapboxgl-vue,mapbox-gl-enhance,echarts" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
		<style>
			#main {
				margin: 0 auto;
				width: 100%;
				height: 100%;
			}
		</style>
	</head>

	<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
		<div id="main">
			<sm-web-map :map-options="mapOptions">
				<sm-echarts-layer :options="echartsOptions"></sm-echarts-layer>
			</sm-web-map>
		</div>
		<script>
			$.get('../data/changchunBus.json', function(data) {
				var echartsOptions = {
					animation: false,
					GLMap: {
						roam: true,
					},
					coordinateSystem: 'GLMap',
					geo: {
						map: 'GLMap',
					},
					series: [
						{
							type: 'lines',
							polyline: true,
							data: data,
							silent: true,
							lineStyle: {
								normal: {
									opacity: 0.2,
									width: 1,
								},
							},
							progressiveThreshold: 500,
							progressive: 100,
						},
						{
							type: 'lines',
							coordinateSystem: 'GLMap',
							polyline: true,
							data: data,
							lineStyle: {
								normal: {
									width: 0.2,
								},
							},
							effect: {
								constantSpeed: 40,
								show: true,
								trailLength: 0.02,
								symbolSize: 2,
							},
						},
					],
				};
				new Vue({
					el: '#main',
					data() {
						var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
						var attribution =
							"<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
							" with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
							" Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
						return {
							echartsOptions: echartsOptions,
							mapOptions: {
								container: 'map', // container id
								style: {
									version: 8,
									sources: {
										'raster-tiles': {
											attribution: attribution,
											type: 'raster',
											tiles: [
												host +
													'/iserver/services/map-china400/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}',
											],
											tileSize: 256,
										},
									},
									layers: [
										{
											id: 'simple-tiles',
											type: 'raster',
											source: 'raster-tiles',
											minzoom: 0,
											maxzoom: 22,
										},
									],
								},
								center: [125.35, 43.86],
								zoom: 10,
							},
						};
					},
				});
			});
		</script>
	</body>
</html>
